<template>
  <div>
    <div
      class="banner-box flex-center bg-[url('~/assets/images/solution/labor_banner.png')] bg-cover bg-no-repeat"
    >
      <div class="banner-con">
        <h1 class="banner-main-title">劳务实名制管理系统</h1>
        <p class="mt-10 banner-text">
          联筑达·智慧工地劳务实名制管理系统，基于AIoT平台开发，运用生物识别技术进行工地现场劳务管理。通过对施工现场工作人员进行人员档案信息录入，依托出口闸机、人脸识别一体机、身份证阅读器、人脸采集摄像头等硬件设备，核验人员身份信息，实现人脸识别打卡、关键岗位考勤、劳务人员管理、农民工合同管理、工人工资发放监管、教育培训等功能。
        </p>
      </div>
    </div>

    <div class="py-[84px]">
      <div class="module-con">
        <h2 class="module-title">系统优势</h2>
        <div class="flex mt-10 flex-col md:flex-row">
          <div class="flex-1">
            <div class=" p-5 xl:p-10 bg-[#0081fa] h-fit md:h-[265px]">
              <img class="w-9 h-9 " src="../../assets/images/solution/labor_icon_01.png" />
              <p class="mt-4 mb-3 text-white text-lg">项目直报，数据直接对接省平台</p>
              <p class="text-sm text-white leading-6">实名制终端硬件设备及所采集的考勤数据直接上报至省建筑工人劳务实名制平台，无需中间二次转报，满足政府部门监管对直报数据的所有要求，保障国检、省检需要。</p>
            </div>
            <div class="p-5 xl:p-10 h-fit md:h-[315px] bg-[url('~/assets/images/solution/labor_trait_01.png')] bg-cover">
              <img class="w-9 h-9 " src="../../assets/images/solution/labor_icon_02.png" />
              <p class="mt-4 mb-3 text-white text-lg">智能分析，考勤数据一目了然</p>
              <p class="text-sm text-white leading-6">劳务工人的考勤数据、设备监测数据等形成智能大数据分析，数据图表可视化呈现，辅助项目决策。</p>
            </div>
          </div>
          <div class="flex-1 flex md:flex-col flex-col-reverse">
            <div class="p-5 xl:p-10 h-fit md:h-[348px] bg-[url('~/assets/images/solution/labor_trait_02.png')] bg-cover">
               <img class="w-9 h-9" src="../../assets/images/solution/labor_icon_03.png" />
              <p class="mt-4 mb-3 text-white text-lg">安全识别，杜绝考勤数据作假</p>
              <p class="text-sm text-white leading-6">人脸识别系统升级至最新的活体识别监测技术，安全识别，精准无误，杜绝虚假上报。</p>
            </div>
            <div class="p-5 xl:p-10 bg-[#0081fa] h-fit md:h-[232px]">
              <img class="w-9 h-9 " src="../../assets/images/solution/labor_icon_04.png" />
              <p class="mt-4 mb-3 text-white text-lg">智慧互联，数据看板全面监管</p>
              <p class="text-sm text-white leading-6">劳务实名制系统与联合智为自主研发的智慧工地云监管平台互通互联，可通过智慧工地监管平台实现对项目全方位的有效监管。</p>
            </div>
          </div>
          <div class="flex-1">
            <div class="p-5 xl:p-10 bg-[#0081fa] h-fit md:h-[265px]">
              <img class="w-9 h-9 " src="../../assets/images/solution/labor_icon_05.png" />
              <p class="mt-4 mb-3 text-white text-lg">数据溯源，云端保存随时查看</p>
              <p class="text-sm text-white leading-6">项目全周期数据采集，与云服务器数据实时联动保存，数据不丢失，方便查询溯源，保障农民工合法权益。</p>
            </div>
            <div class="p-5 xl:p-10 h-fit md:h-[315px] bg-[url('~/assets/images/solution/labor_trait_03.png')] bg-cover">
              <img class="w-9 h-9 " src="../../assets/images/solution/labor_icon_06.png" />
              <p class="mt-4 mb-3 text-white text-lg">售后无忧，专业客服团队保障</p>
              <p class="text-sm text-white leading-6">专业技术服务售后团队保驾护航，实时在线答疑，专业运维人员上门调试，确保售后无忧。</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="py-18 bg-[#FBFBFB]">
      <div class="module-con">
        <h2
          class="hidden md:block md:text-6xl bg-gradient-to-t from-[#EBF6FF] to-[#F8FCFF] uppercase bg-clip-text text-fill-color"
        >
          Labor real name system
        </h2>
        <div class="flex mt-10">
          <div class="w-[53%]">
            <h3
              class="text-[#1393FF] w-fit text-sm md:text-2xl font-extrabold border-b-4 border-[#FF9A19] leading-4"
            >
              <span class="hidden md:block">劳务实名制</span>PC端
            </h3>
            <img
              class="w-full mt-12"
              alt="劳务实名制管理系统"
              src="../../assets/images/solution/labor_pc.png"
            />
          </div>
          <div class="flex-1 flex">
            <img
              class="flex-1 w-0 h-fit"
              src="../../assets/images/solution/labor_phone_01.png"
            />
            <div class="mt-6 flex-1">
              <h3
                class="text-[#1393FF] ml-6 w-fit text-sm md:text-2xl font-extrabold border-b-4 border-[#FF9A19] leading-4"
              >
                <span class="hidden md:block">劳务实名制</span>小程序
              </h3>
              <img
                class="w-full mt-3"
                src="../../assets/images/solution/labor_phone_02.png"
              />
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="py-[90px]">
      <div class="module-con">
        <h2 class="module-title">系统功能</h2>
        <div class="flex flex-wrap justify-around mt-8 text-[#222]">
          <div
            v-for="(item, index) in traitList"
            :key="index"
            class="w-[272.87px] flex-center py-7 mb-9 border border-[#afcefb]"
          >
            {{ item }}
          </div>
        </div>
      </div>
    </div>

    <div class="pt-[90px] pb-[109px] bg-[#FBFBFB]">
      <div class="w-[96%] xl:w-[1200px] mx-auto">
        <h2 class="module-title">硬件产品</h2>
        <div class="flex mt-10 space-x-[3%] overflow-auto">
          <div
            v-for="(btn, index) in productList"
            :key="index"
            class="product-btn"
            :class="{ 'product-btn-active': hardwareCurrent === index }"
            @click="hardwareCurrent = index"
          >
            {{ btn.name }}
          </div>
        </div>
        <!-- s产品内容 -->
        <div class="mt-8">
          <proudct-veriface v-show="hardwareCurrent === 0"></proudct-veriface>
          <product-gate v-show="hardwareCurrent === 1">></product-gate>
          <product-collect-face
            v-show="hardwareCurrent === 2"
          ></product-collect-face>
          <product-card-reader
            v-show="hardwareCurrent === 3"
          ></product-card-reader>
          <product-container v-show="hardwareCurrent === 4"></product-container>
        </div>
        <!-- e产品内容 -->
      </div>
    </div>

    <div class="pt-[84px] pb-16 bg-[#FBFBFB]">
      <div class="w-[96%] xl:w-[1200px] mx-auto">
        <h2 class="module-title">应用效果</h2>
        <div class="flex flex-wrap mt-10 justify-between">
          <div v-for="(item, ind) in 9" :key="ind" class="effect-item">
            <img
              class="w-full h-full"
              :src="
                require(`../../assets/images/solution/labor_effect_0${item}.png`)
              "
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import ProductCardReader from '../../components/ProductCardReader.vue'
import ProductCollectFace from '../../components/ProductCollectFace.vue'
import ProductContainer from '../../components/ProductContainer.vue'
import ProductGate from '../../components/ProductGate.vue'
import ProudctVeriface from '../../components/ProudctVeriface.vue'
export default {
  components: {
    ProudctVeriface,
    ProductGate,
    ProductCollectFace,
    ProductCardReader,
    ProductContainer,
  },
  data() {
    return {
      traitList: [
        '人脸识别打卡',
        '关键岗位考勤',
        '考勤数据统计',
        '劳务信息管理',
        '实名制看板管理',
        '农民工合同管理',
        '工资发放管理',
        '安全教育培训',
      ],
      productList: [
        {
          name: '人脸识别一体',
        },
        {
          name: '进出口闸机',
        },
        {
          name: '人脸采集摄像头',
        },
        {
          name: '身份证阅读器',
        },
        {
          name: '采集箱',
        },
      ],
      hardwareCurrent: 0,
    }
  },
  head: {
    title: '劳务实名制管理系统-联合智为',
    meta: [
      {
        hid: 'index-keywords',
        name: 'keywords',
        content: '劳务实名制管理系统',
      },
      {
        hid: 'index-desc',
        name: 'description',
        content:
          '联筑达·智慧工地劳务实名制管理系统，基于AIoT平台开发，运用生物识别技术进行工地现场劳务管理。通过对施工现场工作人员进行人员档案信息录入，依托出口闸机、人脸识别一体机、身份证阅读器、人脸采集摄像头等硬件设备，核验人员身份信息，实现人脸识别打卡、关键岗位考勤、劳务人员管理、农民工合同管理、工人工资发放监管、教育培训等功能。',
      },
    ],
  },
}
</script>

<style scoped>
.effect-item {
  width: 32%;
  @apply mb-6;
}
</style>
